import React from 'react'
// prettier-ignore
import {
  Text,
  View,
  StyleSheet,
} from 'react-native'

import RxColors from '../../../../commons/styles/RxColors'
import RxLinearGradient, {RxO_vertical} from '../../../../components/view/RxLinearGradient'

const HomePermission = props => {
  const close = false
  let txt = '开'
  let switchStyle = styles.leftOpen
  if (close) {
    txt = '关'
    switchStyle = styles.leftClose
  }

  const colors = ['#35a9fc', '#2f8cff']

  return (
    <View style={styles.container}>
      <View style={styles.content}>
        <RxLinearGradient
          style={[styles.left, switchStyle]}
          colors={colors}
          orientation={RxO_vertical}>
          <Text style={styles.switchText}>{txt}</Text>
        </RxLinearGradient>
        <View style={styles.right}>
          <Text style={styles.title}>无障碍模式权限</Text>
          <Text style={styles.des}>如果不开启，将无法辅助点击</Text>
        </View>
      </View>
    </View>
  )
}

export default HomePermission

const styles = StyleSheet.create({
  container: {
    height: 100,
    marginTop: 10,
    padding: 20,
    borderRadius: 10,
    backgroundColor: RxColors.White,
  },
  content: {
    flex: 1,
    display: 'flex',
    alignItems: 'center',
    flexDirection: 'row',
  },
  left: {
    width: 80,
    height: 80,
    borderRadius: 40,
    color: RxColors.White,
    fontWeight: 'blod',
    fontSize: 16,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  },
  leftOpen: {
    backgroundColor: RxColors.BtnBlue,
  },
  leftClose: {
    backgroundColor: RxColors.BtnGray,
  },
  switchText: {
    fontSize: 28,
    fontWeight: 'bold',
    color: RxColors.White,
  },
  right: {
    marginLeft: 20,
  },
  title: {
    color: RxColors.TextDarkBlack,
    fontSize: 14,
  },
  des: {
    marginTop: 10,
    color: RxColors.BtnGray,
    fontSize: 12,
  },
})
